<style>
.testCase {
   position: relative;
}
.layer, .testCase {
   width: 200px;
   height: 200px;
}
.background {
   overflow: hidden;
}
.background, p {
   position: absolute;
   top: 0;
   left: 0;
}
p {
   color: black;
}
</style>
<!-- No text -->
<div class="testCase noText">
  <div class="layer">
    <p></p>
  </div>
</div>

<!-- No background color -->
<div class="testCase noBgColor">
  <p class="layer">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
  </p>
</div>


<!-- Opaque background color -->
<style>
.opaqueBgColor > .background {
  background-color: red;
}
</style>
<div class="testCase opaqueBgColor">
  <div class="background layer"></div>
  <div class="layer">
    <p>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
  </p>
  </div>
</div>


<!-- Layered opaque background colors -->
<style>
.layeredOpaqueBgColors,
.layeredOpaqueBgColors > .background.obscured {
  height: 300px;
  width: 300px;
}
.layeredOpaqueBgColors > .background.obscured {
  background-color: red;
}
.layeredOpaqueBgColors > .background.obscuring {
  background-color: blue;
}
.layeredOpaqueBgColors > .background.obscuring,
.layeredOpaqueBgColors > .inner.layer {
  position: absolute;
  top: 50px;
  left: 50px;
}

</style>
<div class="testCase layeredOpaqueBgColors">
  <div class="background layer obscured"></div>
  <div class="background layer obscuring"></div>
  <div class="inner layer">
    <p>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
    </p>
  </div>
</div>

<!-- Semi-transparent background color -->
<style>
.semitransparentBgColor > .background {
  background-color: rgba(255, 0, 0, 0.5);
}
</style>
<div class="testCase semitransparentBgColor">
  <div class="background layer"></div>
  <div class="layer">
    <p>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
    </p>
  </div>
</div>

<!-- Two layered semi-transparent background colors -->
<style>
.twoSemitransparentBgColors > .background {
  background-color: rgba(255, 0, 0, 0.5);
}
</style>
<div class="testCase twoSemitransparentBgColors">
  <div class="background layer"></div>
  <div class="background layer"></div>
  <div class="layer">
    <p >
    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
    </p>
  </div>
</div>

<!-- Opaque gradient background -->
<style>
.opaqueGradientBg > .background {
  background: linear-gradient(45deg, red, black);
}
</style>
<div class="testCase opaqueGradientBg">
  <div class="background layer"></div>
  <div class="layer">
    <p>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
    </p>
  </div>
</div>

<!-- Opaque gradient background behind scrim-->
<style>
.opaqueGradientBehindScrim > .background.gradient {
  background: linear-gradient(45deg, red, black);
}
.opaqueGradientBehindScrim > .background.scrim {
  background: rgba(255, 255, 255, 0.5);
}
</style>
<div class="testCase opaqueGradientBehindScrim">
  <div class="background layer gradient"></div>
  <div class="background layer scrim"></div>
  <div class="layer">
    <p>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
    </p>
  </div>
</div>

<!-- Opaque gradient background and color background -->
<style>
.opaqueGradientAndColorBg > .background {
  background-image: linear-gradient(45deg, red, black);
  background-color: blue;
}
</style>
<div class="testCase opaqueGradientAndColorBg">
  <div class="background layer"></div>
  <div class="layer">
    <p>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
    </p>
  </div>
</div>

<!-- Semi-transparent gradient background -->
<style>
.semitransparentGradientBg > .background {
  background: linear-gradient(45deg, rgba(255, 0, 0, 0.5), rgba(0, 0, 0, 0.5));
}
</style>
<div class="testCase semitransparentGradientBg">
  <div class="background layer"></div>
  <div class="layer">
    <p>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
    </p>
  </div>
</div>

<!-- Semi-transparent gradient background and color background -->
<style>
.semitransparentGradientAndColorBg > .background {
  background-image: linear-gradient(45deg, rgba(255, 0, 0, 0.5), rgba(255, 255, 255, 0.5));
  background-color: black;
}
</style>
<div class="testCase semitransparentGradientAndColorBg">
  <div class="background layer"></div>
  <div class="layer">
    <p>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
    </p>
  </div>
</div>

<!-- Layered semi-transparent gradient backgrounds -->
<style>
.twoSemitransparentGradientBgs > .background {
  background: linear-gradient(45deg, rgba(255, 0, 0, 0.5), rgba(0, 0, 0, 0.5));
}
</style>
<div class="testCase twoSemitransparentGradientBgs">
  <div class="background layer"></div>
  <div class="background layer"></div>
  <div class="layer">
    <p>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
    </p>
  </div>
</div>

<!-- Partially overlapping background element -->
<style>
.partiallyOverlappingBackground > .background {
  background-color: red;
  left: 150px;
}
</style>
<div class="testCase partiallyOverlappingBackground">
  <div class="background layer"></div>
  <div class="layer">
    <p>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
    </p>
  </div>
</div>

<!-- Smaller background element -->
<style>
.smallerBackground > .background {
  background-color: red;
  width: 100px;
  height: 100px;
}
</style>
<div class="testCase smallerBackground">
  <div class="background layer"></div>
  <div class="layer">
    <p>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
    </p>
  </div>
</div>

<!-- Partially overlapping background element which is overlapped by opaque element -->
<style>
.obscuredPartiallyOverlappingBackground > .background.partiallyOverlapping {
  background-color: blue;
  left: 150px;
}

.obscuredPartiallyOverlappingBackground > .background.obscuring {
  background-color: red;
}
</style>
<div class="testCase obscuredPartiallyOverlappingBackground">
  <div class="background layer partiallyOverlapping"></div>
  <div class="background layer obscuring"></div>
  <div class="layer">
    <p>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
    </p>
  </div>
</div>

<!-- Background image -->
<style>
.backgroundImage > .background {
  background-image: url(../../../media/content/abe.png);
}
</style>
<div class="testCase backgroundImage">
  <div class="background layer"></div>
  <div class="layer">
    <p>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
    </p>
  </div>
</div>

<!-- Background image and background color -->
<style>
.backgroundImageAndBgColor > .background {
  background-image: url(../../../media/content/abe.png);
  background-color: red;
}
</style>
<div class="testCase backgroundImageAndBgColor">
  <div class="background layer"></div>
  <div class="layer">
    <p>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
    </p>
  </div>
</div>

<!-- Background image behind semi-opaque scrim -->
<style>
.backgroundImageBehindScrim > .backgroundImage {
  background-image: url(../../../media/content/abe.png);
}

.backgroundImageBehindScrim > .scrim {
  background-color: rgba(255, 255, 255, 0.5);
}
</style>
<div class="testCase backgroundImageBehindScrim">
  <div class="background layer backgroundImage"></div>
  <div class="background layer scrim"></div>
  <div class="layer">
    <p>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
    </p>
  </div>
</div>

<!-- Image behind text -->
<div class="testCase foregroundImage">
  <div class="background layer">
    <img width="200" height="200" src="../../../media/content/abe.png" alt="Abraham Lincoln">
  </div>
  <div class="layer">
    <p>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
    </p>
  </div>
</div>

<!-- Image behind scrim -->
<style>
.foregroundImageBehindScrim > .scrim {
  background-color: rgba(255, 255, 255, 0.5);
}
</style>
<div class="testCase foregroundImageBehindScrim">
  <div class="background layer">
    <img width="200" height="200" src="../../../media/content/abe.png" alt="Abraham Lincoln">
  </div>
  <div class="background layer scrim"></div>
  <div class="layer">
    <p>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
    </p>
  </div>
</div>

<!-- Canvas behind text -->
<div class="testCase canvas">
  <div class="background layer">
    <canvas width="200" height="200"></canvas>
    <img width="200" height="200" style="visibility: hidden;" src="../../../media/content/abe.png"></img>
  </div>
  <div class="layer">
    <p>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
    </p>
  </div>
</div>
<script type="text/javascript">
  var image = document.querySelector(".canvas img");
  var canvas = document.querySelector(".canvas canvas");
  var context = canvas.getContext('2d');
  context.drawImage(image, 0, 0, 200, 200);
</script>

<!-- Embed behind text -->
<div class="testCase embed">
  <div class="background layer">
    <embed width="200" height="200" src="../../../media/content/abe.png"></embed>
  </div>
  <div class="layer">
    <p>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
    </p>
  </div>
</div>

<!-- Object behind text -->
<div class="testCase object">
  <div class="background layer">
    <object width="200" height="200" data="../../../media/content/abe.png"></object>
  </div>
  <div class="layer">
    <p>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
    </p>
  </div>
</div>

<!-- Picture behind text -->
<div class="testCase picture">
  <div class="background layer">
    <picture><source type="image/webp" srcset="../../../images/resources/test.webp"><img src="../../../media/content/abe.png" height="200" width="200"></picture>
  </div>
  <div class="layer">
    <p>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
    </p>
  </div>
</div>

<!-- SVG behind text -->
<div class="testCase svg">
  <div class="background layer">
    <svg width="100%" height="100%" viewBox="0 0 400 400"><circle r="200" cx="200" cy="200" stroke="red" stroke-width="1" fill="yellow" /><ellipse cx="120" cy="180" rx="18" ry="33" fill="black"/><ellipse cx="280" cy="120" rx="18" ry="33" fill="black"/><ellipse cx="200" cy="220" rx="8" ry="15" fill="black"/><path stroke-width="10" stroke="black" fill="none" stroke-linecap="round" d="M120,280 Q200,330 290,280"/></svg>
  </div>
  <div class="layer">
    <p>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
    </p>
  </div>
</div>

<!-- Video behind text -->
<div class="testCase video">
  <div class="background layer">
    <video src="../../../media/content/test.ogv" height="200"></video>
  </div>
  <div class="layer">
    <p>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
    </p>
  </div>
</div>

<!-- Element in Shadow DOM -->
<style>
.shadowDom > .background {
  background-color: red;
}
</style>
<div class="testCase shadowDOM">
  <div class="background layer"></div>
  <div class="shadowHost layer">
    <div class="layer">
      <p>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
      </p>
    </div>
  </div>
  <template id="template-shadowDOM">
    <style>
      .background {
        width: 200px;
        height: 200px;
        overflow: hidden;
        background-color: blue;
        position: absolute;
        top: 0;
        left: 0;
      }
    </style>
    <div class="background layer"></div>
    <slot></slot>
  </template>
  <script>
    let template = document.getElementById('template-shadowDOM');
    let shadowRoot = document.querySelector('.testCase.shadowDOM .shadowHost').attachShadow({mode: 'open'});
    shadowRoot.appendChild(template.content.cloneNode(true));
  </script>
</div>
